<template>
  <div class="main">
    <el-breadcrumb separator="-->">
      <el-breadcrumb-item :to="{ path: '/user/center' }">我的账户</el-breadcrumb-item>
      <el-breadcrumb-item>地址管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <el-card> 个人信息详细 </el-card> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>地址管理</span>
      </div>
      <!-- 地址管理 开始 -->
      <el-form status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户ID">
          <el-input disable type="text" autocomplete="off" v-model="uid"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input type="text" autocomplete="off" v-model="addressList.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input type="text" autocomplete="off" v-model="addressList.tel"></el-input>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input type="text" autocomplete="off" v-model="addressList.site"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="text" autocomplete="off" v-model="addressList.remarks"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="insertUserAddress">添加地址</el-button>
      <!-- 地址管理 结束 -->
    </el-card>
  </div>
</template>

<script>
import { insertAddress } from '@/api/user'
export default {
  name: 'UserInfo',
  data() {
    return {
      List: {},
      uid: 0,
      // 修改资料
      addressList: {
        name: '',
        tel: '',
        site: '',
        remarks: '',
      },
    }
  },
  created() {
    this.uid = this.$store.state.user.uid
  },
  methods: {
    async insertUserAddress() {
      const uid = this.$store.state.user.uid
      const result = await insertAddress({ ...this.addressList, uid })
      if (result.status != 0) return this.$message.error('添加失败！')
      this.$message.success('添加成功！')
      this.$router.push('/user/center')
    },
  },
}
</script>

<style scoped lang="less">
.main {
  // height: 1000px;
  .el-breadcrumb {
    margin-top: 20px;
  }
  .el-card {
    margin-top: 20px;
    height: 750px;
  }
  .el-form {
    margin-top: 50px;
  }
  .anquan-title {
    margin-top: 30px;
  }
  .el-button {
    margin-left: 100px;
  }
}
</style>
